<!--
* @description 消控室
* @author zywu
* @date 2021/01/09 10:53:29
!-->
<template>
	<div class="control-room-review">
		<div class="content-top-title">
			<p class="title-text">消控室值守回顾</p>
			<p class="title-desc">“消控室有人值守是消防管理的基石”</p>
		</div>
		<div class="statistics-quantity statistics-two">
			<div>
				<div>
					<span v-if="showType==1">{{detailData.orgExistPersonTotal}}</span>
					<span v-if="showType==2">{{detailData.totalNormalOrg}}</span>
					<p>不间断值守单位总数</p>
				</div>
				<div>
					<span v-if="showType==1" style="color: rgb(250, 124, 90);">{{detailData.orgNotPersonTotal}}</span>
					<span v-if="showType==2" style="color: rgb(250, 124, 90);">{{detailData.totalAlarmOrg}}</span>
					<p>发生无人值守情况单位数</p>
				</div>
			</div>
		</div>
		<div class="duty-detail">
			<div v-if="dataList.length>0" class="duty-detail-org" id="dutyDetailList_box">
				<div class="content-detail-title">
					<img src="/ilink-app-h5-zd/static/img/ilink_1565765076954.png" style="vertical-align:middle;width:25px;height:25px;margin-top: -5px;">单位无人值守最长时间排名
				</div>
				<ul id="dutyDetailList">
					<li v-for="(item,i) in dataList" :key="i">
						<div class="item-number">
							<div class="item-num-div">{{i+1}}</div>
						</div>
						<div class="item-content">
							<div>{{item.orgName}}</div>
							<div style="float: right;">{{item.desc}}</div>
							<div v-if="showType==1" style="float: right;">{{item.desc}}</div>
							<div v-else-if="showType==2" style="float: right;">{{item.continueTimeStr}}</div>
						</div>
					</li>
				</ul>
			</div>
			<div v-if="showPicBox&&picList.length>0" class="duty-detail-picture" id="dutyPic_box">
				<div class="content-detail-title">
					<img src="/ilink-app-h5-zd/static/img/ilink_1565765076954.png" style="vertical-align:middle;width:25px;height:25px;margin-top: -5px;">典型无人值守照片
				</div>
				<div :class="{ 'only-one':picList.length==1 }" class="pic-item" id="dutyPic">
					<img v-for="(item,i) in picList" :key="item+i" :src="item" @click="handlePreview(i)" :style="(i+1)%3==0?'margin-right:0;':''" />
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import { ImagePreview } from 'vant'

export default {
	props: {
		reportData: {
			type: Object,
			default: function () {
				return {}
			},
		},
		period: {
			type: [Number, String],
			default: '',
		},
		periodName: {
			type: String,
			default: '',
		},
	},
	data() {
		return {
			showPicBox: true,
			detailData: {},
			dataList: [],
			picList: [],
			showType: '',
		}
	},

	components: {},

	computed: {},

	created() {
		var data = this.reportData
		if (data.controlRoom && !data.controlRoomData) {
			this.showType = 1
			this.detailData = data.controlRoom
			this.dataList = data.controlRoom.personnelDutyTop
			this.picList = data.controlRoom.notPersonnelDutyPics.split(',').splice(0,9)
		} else if (!data.controlRoom && data.controlRoomData) {
			this.showType = 2
			this.detailData = data.controlRoomData
			this.dataList = data.controlRoomData.dataList
			this.picList = data.controlRoomData.dataList.map((n) => {
				return n.picUrl
			}).filter(n=>{ return n })
		} else {
			this.showPicBox = false
		}
	},

	mounted() {},

	methods: {
		handlePreview(i) {
			ImagePreview({
				images: this.picList,
				startPosition: i,
			})
		},
	},
}
</script>
<style lang='scss'>
.control-room-view{
	.duty-detail-picture{
		margin-top: 20px;
	}
}
</style>